<template>
  <div class="film">
    <div class="filmLeft">
      <h3>屏幕</h3>
      <ul>
        <li v-for="(item, index) in seatflag" :key="index" class="seat"
   :class="{'noSeat' : seatflag[index]==-1,'seatSpace' : seatflag[index]==0,'seatActive' : seatflag[index]==1,'seatNoUse' : seatflag[index]==2}" @click="handleClick(index)">
        </li>
      </ul>
    </div>
    <div class="filmRight">
      <div class="rightTop">
        <div class="rightTopleft">
          <a href="#">
            <img :src="filmInfo.filmImg" alt="..." height="200">
          </a>
        </div>
        <div class="rightTopRight">
          <p >中文名：<strong>{{filmInfo.name}}</strong></p>
          <p >英文名：{{filmInfo.nameEnglish}}</p>
          <p>剧情：{{filmInfo.storyType}}</p>
          <p>版本：{{filmInfo.copyRight}}</p>
          <p>{{filmInfo.place}} / {{filmInfo.timeLength}}</p>
          <p>{{filmInfo.timeShow}}<button type="button" class="btn2" @click="Allseat()">
            {{allseat}}
          </button></p>
        </div>
      </div>
      <div class="rightBootom">
         <p>影院：<strong>{{filmInfo.cinema}}</strong></p>
        <p>影厅：<select id="froom" v-model="seatflag0[0].selected" name="fruit" @change="change()">
    <option value="8">8号影厅</option>
<option value="7">7号影厅</option>
    <option value="6">6号影厅</option>
  </select><span v-show="false">{{seatflag0[0].selected}}</span></p>
          <p>场次：<select id="ftime" v-model="seatflag0[0].selected2" name="fruit2" @change="change2()">
    <option value="8">2021.05.18（周二）10:00</option>
<option value="7">2021.05.19（周二）15:00</option>
    <option value="6">2021.05.20（周二）22:00</option>
  </select><span v-show="false">{{seatflag0[0].selected2}}</span></p>
          <p id="seatSelect">座位：<span v-for="(item, index) in curSeatDisp" :key="index">{{item}}</span></p>
          <p>已选择<strong style="color:red;">{{count}}</strong>个座位，<strong style="color:red;">再次单击座位可取消。
          <span class="seatText" v-if="maxFlag">您如果不包场一次最多只能买10张票！</span></strong></p>
          <hr>
          <p>单价：<strong>{{numberFormat(filmInfo.unitPrice) }}</strong></p>
          <p>总价：<strong style="color:red;">{{numberFormat(fileTotal)}}</strong></p>
          <hr>
          <button type="button" class="btn" @click="filmSubmit">
            确认下单
          </button>
      </div>

    </div>

  </div>

</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import FileImg from './assets/film1.png'
export default {

  setup () {
    const state = reactive({
      curSeat: [],
      curSeatDisp: [],
      count: 0,
      maxLength: 5,
      maxFlag: false,
      seatCol: 10,
      allseat: '我要包场',
      selected: '8',
      selected2: '8',
      seatflag0: [{
        selected: '8',
        selected2: '8',
        seatf: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 2, 2, 0, 0, 0, 0,
          0, 0, 0, 2, 2, 0, 2, 2, 0, 0,
          -1, 0, 0, 0, 0, 0, 0, 0, 0, -1,
          -1, -1, 0, 0, 0, 0, 0, 0, -1, -1]
      }
      ],
      seatflag8: [{
        selected: '8',
        selected2: '8',
        seatf: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 2, 2, 0, 0, 0, 0,
          0, 0, 0, 2, 2, 0, 2, 2, 0, 0,
          -1, 0, 0, 0, 0, 0, 0, 0, 0, -1,
          -1, -1, 0, 0, 0, 0, 0, 0, -1, -1]
      }
      ],
      seatflag7: [{
        selected: '7',
        selected2: '7',
        seatf: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 2, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 2, 0,
          0, 2, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 2, 0, 0, 0,
          0, 2, 0, 0, 0, 0, 0, 0, 2, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 2, 2, 0, 0, 0, 0,
          0, 0, 0, 2, 2, 0, 2, 2, 0, 0,
          -1, 0, 0, 0, 0, 0, 0, 0, 0, -1,
          -1, -1, 0, 0, 0, 0, 0, 0, -1, -1]
      }
      ],
      seatflag6: [{
        selected: '6',
        selected2: '6',
        seatf: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          -1, 0, 0, 0, 0, 0, 0, 0, 0, -1,
          -1, -1, 0, 0, 0, 0, 0, 0, -1, -1]
      }
      ],
      filmInfo: {
        name: '囧妈',
        nameEnglish: 'Lost in Russia',
        copyRight: '中文2D',
        filmImg: FileImg,
        storyType: '喜剧',
        place: '中国大陆',
        timeLength: '126分钟',
        timeShow: '2020.02',
        cinema: '万达影城',
        room: '8号影厅',
        time: '2021.05.18（周二）20:00',
        unitPrice: 38
      }
    })
    const change = () => {
      if (state.seatflag0[0].selected === '7') {
        state.seatflag0[0].selected2 = state.seatflag7[0].selected2
        state.seatflag = state.seatflag7[0].seatf
        state.curSeatDisp = []
        state.allseat = '我要包场'
        alert('您选择了7号影厅！')
      } else if (state.seatflag0[0].selected === '6') {
        state.seatflag = state.seatflag6[0].seatf
        state.seatflag0[0].selected2 = state.seatflag6[0].selected2
        state.allseat = '我要包场'
        state.curSeatDisp = []
        alert('您选择了6号影厅！')
      } else if (state.seatflag0[0].selected === '8') {
        state.seatflag = state.seatflag8[0].seatf
        state.seatflag0[0].selected2 = state.seatflag8[0].selected2
        state.allseat = '我要包场'
        state.curSeatDisp = []
        alert('您选择了8号影厅！')
      }
    }
    const change2 = () => {
      if (state.seatflag0[0].selected2 === '7') {
        state.seatflag0[0].selected = state.seatflag7[0].selected
        state.seatflag = state.seatflag7[0].seatf
        state.allseat = '我要包场'
        state.curSeatDisp = []
        alert('您选择了7号影厅！')
      } else if (state.seatflag0[0].selected2 === '6') {
        state.seatflag = state.seatflag6[0].seatf
        state.seatflag0[0].selected = state.seatflag6[0].selected
        state.allseat = '我要包场'
        state.curSeatDisp = []
        alert('您选择了6号影厅！')
      } else if (state.seatflag0[0].selected2 === '8') {
        state.seatflag = state.seatflag8[0].seatf
        state.seatflag0[0].selected = state.seatflag8[0].selected
        state.allseat = '我要包场'
        state.curSeatDisp = []
        alert('您选择了8号影厅！')
      }
    }
    state.seatflag = state.seatflag0[0].seatf
    state.selected = state.seatflag0[0].selected
    // 方法代替过滤器
    const numberFormat = (value) => '￥' + value.toFixed(2)

    // 计算属性
    const fileTotal = computed(() => {
      return state.count * state.filmInfo.unitPrice
    })
    const Allseat = () => {
      if (state.allseat === '我要包场') {
        var flag = 0
        for (var i = 0; i < state.seatflag.length; i++) {
          if (state.seatflag[i] === 2) {
            flag += 1
            alert('有座位被售出，您不能包场！')
            break
          }
        }
        if (flag === 0) {
          for (var j = 0; j < state.seatflag.length; j++) {
            if (state.seatflag[j] === 0) {
              state.seatflag[j] = 1
            }
          }
          alert('包场成功！')
          state.count = 114
          state.curSeatDisp = []
          state.curSeatDisp.push('包场')
          state.allseat = '取消包场'
        }
      } else if (state.allseat === '取消包场') {
        for (var t = 0; t < state.seatflag.length; t++) {
          if (state.seatflag[t] === 1) {
            state.seatflag[t] = 0
          }
        }
        alert('取消包场成功！')
        state.count = 0
        state.curSeatDisp.pop('包场')
        state.allseat = '我要包场'
      }
    }
    // 单击事件处理方法
    const handleClick = (index) => {
      if (state.seatflag[index] === 1) {
        state.seatflag[index] = 0
        state.curSeat.splice(state.curSeat.findIndex(item => item === index), 1)
      } else {
        // 判断单击座位是否是可选座位并且选中座位数小于5
        if (state.seatflag[index] === 0 && state.curSeat.length < 10) {
          state.seatflag[index] = 1
          state.curSeat.push(index)
        }
      }
      // 设置当前选中的座位
      state.curSeatDisp = []
      if (state.count <= 10) {
        for (const data of state.curSeat) {
          state.curSeatDisp.push((Math.floor(data / state.seatCol) + 1) + '行' + (data % state.seatCol + 1) + '列')
        }
      }
      // 计数已经选择了多少个座位
      var mySeat = state.seatflag.filter(item => item === 1)
      state.count = mySeat.length
      // 判断达到购买上限
      if (state.count >= 10 && state.allseat === '我要包场') state.maxFlag = true
      else state.maxFlag = false
    }
    return {
      ...toRefs(state),
      fileTotal,
      handleClick,
      numberFormat,
      Allseat,
      change,
      change2
    }
  }
}
</script>

<style scoped>
  .film{
    margin: 0 auto;
    width: 1050px;
    border:1px solid grey;
    height: 550px;

  }
  .filmLeft{
    width:550px;
    height: 500px;
    float: left;
  }
  .filmLeft h3{
    text-align: center;
  }
  .filmLeft ul {
    list-style: none;
  }
  .filmRight{
    width:500px;
    height: 550px;
    float: left;
    background-color: bisque;
  }
.rightTopleft{
  float: left;
  margin: 5px 15px 5px 10px;
}
.rightTopRight{
  float: left;
  margin:-10px 0px 5px 5px
}
.rightTopRight p{
  line-height: 18px;
}
.rightBootom{
  clear: both;
  margin: 0px 10px;
}
.rightBootom p{
  line-height: 8px;
}
.seat {
    float: left;
    width: 30px;
    height: 30px;
    background-color: bisque;
    margin: 5px 10px;
    cursor: pointer;
  }
  .seatNotice {
    float: left;
    width: 30px;
    height: 30px;
    margin: 5px 10px;
    background-color: bisque;
    list-style: none;
    margin-left: 50px;
  }

  .notice {
    float: left;
    height: 30px;
    line-height: 30px;
  }

        .seatSpace {
            background: url('./assets/bg.png') no-repeat 1px -29px;
        }

        .seatActive {
            background: url('./assets/bg.png') 1px 0px;
        }

        .seatNoUse {
            background: url('./assets/bg.png') 1px -56px;
        }

        .noSeat {
            background: url('./assets/bg.png') 1px -84px;
        }
#filmInformation,#filmRightTopLeft{
  float: left;
 }
#filmRightBottom{
  clear: both;
}

        #filmInformation h4,
        #filmInformation p {
            font-size: 20px;
            margin-left: 15px;
            margin-bottom: 14px;
        }

        #filmInformation p {
            font-size: 13px;
            margin-left: 15px;
        }

        .sceenRight {
            background-color: bisque;
            height: 650px;
            padding-top: 10px;
        }

        .sceenRight>p {
            color: red;
            font-size: 25px;

        }

        .filmCurrent {
            font-size: 16px;
            margin: 5px;
        }

        .filmCurrent p {
            margin: 15px;
        }

        #seatSelect span {
            padding: 3px;
            border: 1px solid red;
            margin: 5px;
            font-size: 10px;
            background-color: white;
            font-weight: bold;
            color: red;
        }
        #seatSelect {
            line-height: 25px;
        }
        .seatText {
            line-height: 20px;
        }
        .btn{
          margin: 1px 150px;
          width: 120px;
          height: 40px;
          background-color: rgb(68, 168, 135);
          color: white;
          cursor: pointer;
        }
        .btn2{
          margin-left: 100px;
          width: 80px;
          height: 30px;
          background-color: rgb(68, 168, 135);
          color: white;
          cursor: pointer;
        }
        hr{
          height: 1px;
          margin: 1px;
        }
</style>
